<template>
  <div>
    <el-container style="height:500px">
    <!-- 发件人列表 -->
      <el-aside width="200px" style="background-color:white">
        <div style="height:70px; text-align: center; line-height: 70px;" >
          &nbsp;&nbsp;近期消息
        </div>
        <el-menu>
          <el-submenu v-for="(item,index1) in sendUser" :key="index1" index=index1>
            <template slot="title">
              <div @click="findMessage(index1)">
                <!-- 头像 -->
                <el-avatar :src="item.headImg"></el-avatar>&nbsp;&nbsp;
                <strong style="font-size:medium">{{item.username}}</strong>
              </div>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 子标题栏 -->
        <el-header style="height:30px;text-align: center; line-height: 30px;">
          <strong style="font-size:large">{{currentUser.username}}</strong>
        </el-header>
        <!-- 显示内容 -->
        <el-main style="">
          <messageShow :message="message" :currentUser="currentUser"></messageShow>
        </el-main>
        <!-- 底部空间，用来盛放回复框 -->
        <div style="height:150px">

        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import messageShow from './MessageShow.vue' 
export default {
  data(){
    return{
      sendUser:[],
      message:[],
      currentUser:Object,
      value:'',
      clickIndex:0, //记录在和谁聊天，默认为sendUser[0],因为这个是默认打开聊天界面的
    }
  },
  components:{
    messageShow
  },
  methods:{
    //查询相关信息
    findMessage:function(index1){
      this.$axios.get("/message/findMessage/"+this.sendUser[index1].id).then(res=>{
        if(res.data.status=="SUCCESS"){
          this.message = res.data.data
          this.value = this.sendUser[index1].username
          this.clickIndex = index1
          this.currentUser = this.sendUser[index1]
          /* console.log(this.sendUser);
          console.log(this.message) */
        }
      })
    },
    //查询来信人
    getSendUsers:function(){
      this.$axios.get("/message/sendUser").then(res=>{
        if(res.data.status=="SUCCESS"){
          this.sendUser = res.data.data
          console.log(this.sendUser);
          //尝试在回调函数中执行查询，查询来信人列表后查出第一个人的聊天记录
          this.$axios.get("/message/findMessage/"+this.sendUser[0].id).then(res=>{
            if(res.data.status=="SUCCESS"){
              this.message = res.data.data
              this.currentUser = this.sendUser[0]
              console.log(this.sendUser);
              console.log(this.message)
            }
          })   
        } 
      })
    },
  },
  //在渲染视图后执行
  mounted(){
    //加载联系人
    this.getSendUsers()
  },
}
</script>

<style scoped>
  
</style>